<template>
  <div>
    <h1>收到的学生名字: {{name}}</h1>
    <MySchool :getSchoolName = "getSchoolName" @click.native= "show"/>
    <hr>
    @符号实现:<MyStudent @getStudentName="getStudentName"/>
    <hr>
    ref方法实现:<MyStudent ref="student"/>
  </div>
</template>

<script>
import MySchool from './components/MySchool.vue'
import MyStudent from './components/MyStudent.vue'

export default {
  name: 'App',
  components:{
    MySchool: MySchool,
    MyStudent: MyStudent
  },
  data(){
    return {
      name: ""
    }
  },
  methods:{
    getSchoolName(schoolName){
      console.log("app收到了School组件的名字:",schoolName)
    },
    getStudentName(studentName){
      console.log("app收到了Student组件的名字:",studentName);
      this.name = studentName;
    },
    show(){
      alert("这是子组件上原生的绑定事件")
    }
  },
  mounted() {

// 这个里面的 console.log("app当前this是:",this)行代码打印出来的是studentVc实例
      // this.$refs.student.$on("getStudentName", function (studentName){
      //   console.log("app收到了Student组件的名字:",studentName);
      //   console.log("app当前this是:",this)
      //   this.name = studentName;
      // })


    this.$refs.student.$on("getStudentName", (studentName)=>{
      console.log("app收到了Student组件的名字:",studentName);
      console.log("app当前this是:",this)
      this.name = studentName;
    })
  }
}
</script>


